<template>
    <div class="source"></div>
</template>

<script>
export default {
  name: 'Source',
  props: ['source'],
  watch: {
    // source: {
    //   handler() {
    //     this.updateStyle();
    //   },
    //   immediate: true,
    //   // deep: true,
    // },
    // layer: {
    //   handler() {
    //     this.updateStyle();
    //   },
    //   immediate: true,
    //   deep: true,
    // }
  },
  methods: {
    updateStyle(layer) {
      // console.log('rrrrr', this)
      const { source } = this;
      const { data, ...sourceOption } = source;
      // console.log('ddddd', layer)
      if (!layer) {
        return
      }
      if (!layer.inited) {
        layer.source(data, sourceOption);
      } else {
        layer.setData(data, sourceOption);
      }
      
      if (sourceOption.autoFit) {
        layer.fitBounds(sourceOption && sourceOption.fitBoundsOptions);
      }
    },
  },
}
</script>